﻿@model Quiz.Model.Question

@{
    ViewBag.Title = "Edit";
    var ansPosition = "?";
    ViewBag.Menu = "Play.Index";
}
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.js"></script>
<style>
    .answerset {
        padding: 20px;
        clear: both;
    }

    .char {
        width: 16px;
    }

    .position {
        width: 32px;
        float: left;
        margin-right: 20px;
    }
        .position a {
            text-decoration:none;
        }
    .question {
        font-size: small;
        float: right;
    }

    .selected {
        width: 16px;
        background-color: red;
    }

    .unselected {
    }

    #feedback {
        font-size: 1.4em;
    }

    #selectable .ui-selecting {
        background: #FECA40;
    }

    #selectable .ui-selected {
        background: #F39814;
        color: white;
    }

    #selectable {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 60%;
    }

        #selectable li {
            margin: 3px;
            padding: 0.4em;
            font-size: 1.4em;
            height: 18px;
        }
</style>

<h2>Question Edit</h2>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>
           &nbsp;
        </legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.QuestionText)
        </div>
        <div class="editor-field">
              @Html.HiddenFor(model => model.RowKey)
            @Html.EditorFor(model => model.QuestionText)
            @Html.ValidationMessageFor(model => model.QuestionText)
        </div>

        <div class="editor-field">
            @Html.HiddenFor(model => model.QuestionType)
            @Html.ValidationMessageFor(model => model.QuestionType)
        </div>

        @Html.HiddenFor(model => model.QuestionID)

        <div class="editor-label">
            @Html.LabelFor(model => model.AnswerDom)
        </div>
        <div class="editor-field">
            @if (Model != null && !string.IsNullOrEmpty(Model.AnswerDom))
            {
                List<Quiz.Model.AnswerSet> answers = Model.GetPossibleAnswers();

                if (answers.Any())
                {
                <ol id="selectable">
                    @foreach (Quiz.Model.AnswerSet item in answers)
                    {
                        string txtName = string.Format("AnserSet|{0}|{1}", item.Position, item.AnswerSetID);
                        string chkPosition = string.Format("Position_{0}", item.Position);
                        string rdoSelected = string.Format("Radio_{0}", item.Position);
                        bool selected = (Model.AnswerRowID == item.AnswerSetID);
                        ansPosition = (selected) ? item.Position.ToString() : "?";
                        <li class="answerset ui-widget-content" data-anserset="@item.AnswerSetID" data-position="@item.Position">
                            <span class="position ui-btn ui-btn-text ui-field-contain ui-btn ui-submit">
                              <a href="#">  @item.Position </a>
                            </span>
                            <span class="question">
                               <a href="#">   @Html.TextBox(txtName, item.Text) </a>
                            </span>
                        </li>
                    }
                </ol>
                <script type="text/javascript">
                    $(function () {
                        $("#selectable > li").click(function () {
                            $("#AnswerRowID").val($(this).attr("data-anserset"));
                            $("#AnwserPosition").val($(this).attr("data-position"));
                        });
                    });
                </script>     
                }
                else
                {
                <div>
                    No Answer Registered
                </div>
                }
            }
            else
            {
                <div>
                    No Answer Registered
                </div>
            }
            <div style="clear: both;">
                <p></p>
            </div>
            <input type="submit" name="answer" value="Edit Answers" />
        </div>
        <div style="clear: both;">
            <p></p>
        </div>
        <div class="editor-label">
            Select Answer from Above
        </div>
        <div class="editor-field">
            <input type="text" id="AnwserPosition" value="@ansPosition" disabled="disabled" name="AnwserPosition" />

            @Html.HiddenFor(model => model.AnswerRowID)
            @Html.ValidationMessageFor(model => model.AnswerRowID)
          
        </div>
        <div style="clear: both">
        </div>
        <p>
            <input type="submit" name="save" value="Save Question" />
        </p>
    </fieldset>
}

<div>
    @{
        var listPage = Url.Action("Index");
    }
  <button onclick="window.location.href='@listPage'">Go To List</button>
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
